<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
  		<ul id="itcast">
  			<li>传智播客</li>
  			<li>黑马程序员</li>
  			<li>博学谷</li>
  		</ul>
  		<input type="text" id="addText" />
  		<input type="button" value="动态生成列表项" onclick="addli()"/>
		<script type="text/javascript">
			function addli(){
				//得到文本框的值
				var value = document.getElementById("addText").value;
				//清空文本框的值
				document.getElementById("addText").value="";
				//创建一个li的子元素
				var li = document.createElement("li");
				//设置li的文本内容
				li.innerText = value;
				//获取ul
				var ul = document.getElementById("itcast");
				//把li加入到ul下
				ul.appendChild(li);
			}
		</script>
  </body>

</html>
